<template>
  <div class="verify-container">
    <van-nav-bar title="验证手机号码" left-arrow @click-left="onBack" />
    <van-form v-model="formData">
      <van-field
        v-model="formData.phone"
        placeholder="请输入手机号码"
        border-bottom
        type="phone"
        label="手机号码"
      />
      <van-field
        v-model="formData.code"
        placeholder="输入验证码"
        border-bottom
        type="number"
        label="验证码"
      >
        <template #button>
          <van-button
            type="primary"
            size="small"
            plain
            :loading="sendLoading"
            :disabled="countDown"
            @click="sendVerificationCode"
          >
            {{ countDown ? `${countDown}s` : '获取验证码' }}
          </van-button>
        </template>
      </van-field>
    </van-form>
    <van-button
      type="primary"
      round
      block
      class="submit-btn"
      @click="handleSubmit"
    >
      提交
    </van-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Toast } from 'vant'

const formData = ref({
  phone: '',
  code: ''
})
const sendLoading = ref(false)
const countDown = ref(0)

// 返回上一页
const onBack = () => {
  window.history.back()
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!formData.value.phone) {
    Toast('请先输入手机号码')
    return
  }
  if (countDown.value > 0) return

  sendLoading.value = true
  // 模拟请求（实际替换为真实接口）
  setTimeout(() => {
    Toast('验证码发送成功')
    startCountDown()
    sendLoading.value = false
  }, 1000)
}

// 倒计时
const startCountDown = () => {
  countDown.value = 60
  const timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) clearInterval(timer)
  }, 1000)
}

// 提交验证
const handleSubmit = () => {
  if (!formData.value.phone) {
    Toast('请输入手机号码')
    return
  }
  if (!formData.value.code) {
    Toast('请输入验证码')
    return
  }
  // 模拟验证（实际替换为真实接口）
  Toast('验证成功')
  // 跳转逻辑或其他操作
}
</script>

<style scoped>
.verify-container {
  padding: 20px;
}
.submit-btn {
  margin-top: 20px;
  background: #ffc0cb;
  border-color: #ffc0cb;
  color: white;
}
</style>